<template>
    <div class="app-container">
        <el-card shadow="never" v-loading="loading">
            <el-row :gutter="5">
                <el-col :span="24" class="main-card-view">
                    <el-row>
                        <el-card shadow="never" class="top-search-view-card">
                            <el-row>
                                <el-form :inline="true" :model="searchForm" class="demo-form-inline search-view">
                                    <el-form-item label="关键字">
                                        <el-input v-model="searchForm.keyword" placeholder="请输入关键字"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="handleSearch" class="search-button">查询
                                        </el-button>
                                        <!--                                        <el-button type="success" @click="handleReset" class="reset-button">重置</el-button>-->
                                        <el-button type="primary" @click="showCreateDialog" class="new-button" v-if="userInfo.roleName === '运营人员' || userInfo.roleName === '管理员'">添加
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </el-row>
                        </el-card>
                    </el-row>

                    <el-row>
                        <el-card shadow="never">
                            <el-table :data="tableData" :stripe="true" style="width: 100%">

                                <el-table-column prop="periods" align="center" label="期数"/>
                                <el-table-column prop="createTime" align="center" label="创建时间"/>
                                <el-table-column prop="contentsNum" align="center" label="内容数">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="goContents(scope.row)">{{
                                                scope.row.contentsNum
                                            }}
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="操作" width="200">
                                    <template slot-scope="scope">
                                         <el-button type="text" @click="attachmentsDown(scope.row)">下载</el-button>
                                        <!--                                        <el-button type="text" class="table-details-btn"-->
                                        <!--                                                   @click="handleDetails(scope.$index, scope.row)"></el-button>&lt;!&ndash;详情&ndash;&gt;-->

                                        <el-button type="text" class="table-edit-btn"
                                         v-if="scope.row.status === '未审核' || userInfo.roleName === '运营人员'|| userInfo.roleName === '管理员'"
                                                   @click="showEditDialog(scope.$index, scope.row)"></el-button>
                                        <!--编辑-->
                                        <el-button type="text" class="table-delete-btn"
                                         v-if="scope.row.status === '未审核' || userInfo.roleName === '管理员'|| userInfo.roleName === '运营人员'"
                                                   @click="handleDelete(scope.$index, scope.row)"></el-button><!--删除-->
                                    </template>
                                </el-table-column>
                            </el-table>
                            <XPagination ref="pageInfo" :total="total" :get-data="getList"/>
                        </el-card>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
            <el-form label-width="80px" ref="form" :model="form" :rules="formRules">
                <el-form-item label="期数" prop="periods">
                    <el-input v-model="form.periods"/>
                </el-form-item>
                <el-form-item label="图片" prop="imgUrl">
                    <x-upload v-model="form.imgUrl"/>
                </el-form-item>
                <el-form-item label="关键字" prop="keyword">
                    <el-input v-model="form.keyword"/>
                </el-form-item>
            </el-form>
            <template slot="footer">
                <el-button type="primary" @click="handleSave">保存</el-button>
            </template>
        </el-dialog><el-dialog width="40%" title="附件下载" :visible.sync="attachmentsDialog">
            <el-table :data="attachmentsList" :stripe="true" style="width: 100%">
                <el-table-column prop="originName" align="center" label="附件名称" />
                <el-table-column align="center" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button @click="download(scope.row)" type="text">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template slot="footer">
                <el-button type="primary" @click="attachmentsDialog = false">关闭</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<script>
    import XPagination from "../../components/xpagination/XPagination";
    import XUpload from "../../components/xupload/XUpload"
    import * as shanxiDaily from "../../api/shanxiDaily"
    import * as formUtils from "../../utils/formUtils";
    import * as myDownload from "../../api/myDownload"
    export default {
        name: "list",
        components: {XPagination, XUpload},
        data() {
            return {
                searchForm: {
                    roleName: ""
                },
                tableData: [],
                userInfo: {},
                loading: false,
                dialogVisible: false,
                total: 0,
                dialogTitle: "添加",
                attachmentsDialog: false,
                attachmentsList: [],
                form: {
                    uid: "",
                    roleName: "",
                    description: "",
                    imgInfo:""
                },
                editStatus: "add",
                formRules: {
                    periods: [
                        {required: true, message: '不能为空', trigger: 'blur'},
                    ],
                    keyword: [
                        {required: true, message: '不能为空', trigger: 'blur'},
                    ],
                }

            }
        },
        methods: {
            getList(pageInfo) {
                const param = {
                    ...this.searchForm,
                    ...pageInfo
                }
                param.publisherUid=this.userInfo.uid
                shanxiDaily.queryByPage(param).then(response => {
                    console.log(response)
                    this.tableData = response.data.data.rows
                    this.total = response.data.data.total
                    this.loading = false
                }).catch(error => {
                    console.log(error)
                })
            },
            handleDelete(index, data) {
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true
                    shanxiDaily.deleteById(data.uid).then(result => {
                        this.loading = false
                        this.$message.success(result.data.msg)
                        this.handleSearch()
                    }).catch(error => {
                        this.loading = false
                        console.log(error)
                    })
                }).catch(() => {
                    console.log('取消删除')
                });
            },
            queryFileInf (uid) {
                 console.log("uid-->"+uid)
                shanxiDaily.queryFileInf({ fileUid: uid }).then(result => {
                    //this.form.fileInfos = []
                    let arr = []
                    if(result.data.data.total>0){
                        result.data.data.rows.forEach(item => {
                            arr.push({
                                name: item.originName,
                                url: item.fileUrl
                            })
                        })
                        this.$nextTick(() => {
                            this.$refs.uploadAttachments.fileList = arr
                        })
                    }
                }).catch(error => {
                    this.$message.error(error)
                    console.log(error)
                })
            },
            attachmentsDown (data) {

                this.form = Object.assign({}, data)
                this.attachmentsDialog = true
                shanxiDaily.queryFileInf({ fileUid: data.uid }).then(result => {
                    this.attachmentsList = result.data.data.rows
                    console.log("data.uid-->"+this.attachmentsList)
                }).catch(error => {
                    this.$message.error(error)
                    console.log(error)
                })
            },
            download (data) {
                const a = document.createElement('a')
                a.style.display = 'none'
                a.download = data.originName
                a.href = data.fileUrl
                document.body.appendChild(a)
                a.click()
                document.body.removeChild(a)
                let param = {
                    "titleName": this.form.periods,
                    "classify": "百姓健康系列栏目/《陕西日报》百姓专版",
                    "publisher": "陕西健康教育中心",
                    "publisherUid": "d84053c84c4244d2abb343f74311b111",
                    "origin": this.form.origin,
                    "publishUid": this.form.uid,
                    "downloaderUid": this.userInfo.uid
                }
                myDownload.insert(param).then(result => {
                    console.log(result)
                }).catch(error => {
                    this.$message.error(error)
                    console.log(error)
                })
            },
            handleSearch() {
                this.$refs.pageInfo.loadData()
            },
            showCreateDialog() {
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.dialogTitle = "添加"
                    this.editStatus = "add"
                    this.$refs.form.resetFields()
                    this.form = Object.assign({}, this.$options.data().form)
                })
            },
            handleSave() {
                if (this.editStatus === "add") {
                    this.handleAdd()
                } else {
                    this.handleEdit()
                }
            },
            handleAdd() {
                this.$refs["form"].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    const param = Object.assign({}, this.form)
                    param.publisherUid=this.userInfo.uid
                    param.publisher=this.userInfo.userName
                    param.roleUid=this.userInfo.roleUid
                    param
                    formUtils.filterFormFields(param)
                    shanxiDaily.insert(param).then(result => {
                        this.$message.success(result.data.msg)
                        this.dialogVisible = false
                        this.handleSearch()
                    }).catch(error => {
                        this.$message.error(error)
                        console.log(error)
                    })

                })
            },
            handleEdit() {
                this.$refs["form"].validate((valid) => {
                    if (!valid) {
                        return false
                    }
                    const param = Object.assign({}, this.form)
                    param.publisherUid=this.userInfo.uid
                    param.publisher=this.userInfo.userName
                    param.roleUid=this.userInfo.roleUid
                    formUtils.filterFormFields(param)
                    shanxiDaily.update(param).then(result => {
                        this.$message.success(result.data.msg)
                        this.dialogVisible = false
                        this.handleSearch()
                    }).catch(error => {
                        this.$message.error(error)
                        console.log(error)
                    })
                })
            },
            showEditDialog(index, data) {
                this.dialogVisible = true
                this.$nextTick(() => {
                    this.$refs.form.resetFields()
                    this.form = Object.assign({}, data)
                    this.dialogTitle = "编辑"
                    this.editStatus = "edit"
                    this.queryFileInf(data.uid)
                })
            },
            goContents(row) {
                console.log(row)
                this.$router.push({
                    path: '/pHealthSeriesColumns/shanxiDailyDetails',
                    query: {
                        uid: row.uid
                    }
                })
            }
        },
        mounted() {
            this.userInfo = JSON.parse(localStorage.getItem('user_info'))
            this.handleSearch()
        }
    }
</script>

<style scoped lang="scss"></style>
